<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: "PaneView",
  props: {
    className: { type: String, default: "pane" },
    split: {
      validator(value: string) {
        return ["vertical", "horizontal"].indexOf(value) >= 0;
      },
      required: true
    }
  },
  data() {
    const classes = [this.split, this.className];
    return {
      classes: classes.join(" "),
      percent: 50
    };
  }
};
</script>

<style scoped>
.splitter-pane.vertical.splitter-paneL {
  position: absolute;
  left: 0px;
  height: 100%;
  /* padding-right: 16px; */
}

.splitter-pane.vertical.splitter-paneR {
  position: absolute;
  right: 0px;
  height: 100%;
  padding-left: 6px;
}

.splitter-pane.horizontal.splitter-paneL {
  position: absolute;
  top: 0px;
  width: 100%;
}

.splitter-pane.horizontal.splitter-paneR {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-top: 8px;
}
.no-padding {
  padding-right: 0 !important;
}
</style>
